<template>
    <div class="teacher_style">
        <div class="t_top">
            <div class="t_top_title">
                学生查询
            </div>

            <div class="t_top_body">
                <el-form :model="form" :inline="true" label-width="120px">
                    <el-form-item label="学生编号：">
                        <el-input v-model="form.code" placeholder="请输入学生编号" />
                    </el-form-item>
                    <el-form-item label="学生姓名：" >
                        <el-input v-model="form.name"  placeholder="请输入学生姓名"/>
                    </el-form-item>
                    <el-form-item label="授课院系：">
                        <el-select v-model="form.department" placeholder="请选择/输入" @change="chooseClass()">
                            <el-option :label="item.department" :value="item.id" v-for="(item, index) in departmentList"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授课班级：">
                        <el-select v-model="classes1" placeholder="请选择/输入">
                            <el-option :label="item.class_title" :value="item.id" v-for="(item, index) in classesList"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="inquire()">查询</el-button>
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="t_body">
            <div class="t_body_title">
                <span>数据列表</span>
                <div class="anniuList" flex="cross:center">
                    <div class="anniu" @click="downLoadMuBan()">下载导入模板</div>
                    <!-- <div class="anniu">批量导入</div> -->
                    <plLiangDaoRu paramsCanshu="/student/import" @getData="getteacherList"></plLiangDaoRu>
                    <div class="anniu" @click="newClick()">新增</div>
                    <div class="anniu">删除 </div>
                    <div class="anniu anniu2">刷新</div>
                    <!-- <div class="anniu anniu2">导出</div> -->
                    <ExportTable url="/student/out" Name="学生列表"></ExportTable>
                </div>
            </div>
            <div class="t_body_table">
                <el-table :data="tableData" border style="width: 100%" :header-cell-style="tableHeaderColor"
                    :row-class-name="tableRowClassName" height="580" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="date" fixed label="序号" width="100" align="center">
                        <template #default="scope">{{
                            (compPama.page - 1) * compPama.limit + (scope.$index + 1)
                        }}</template>
                    </el-table-column>
                    <el-table-column prop="code" label="学生编号" align="center"> </el-table-column>
                    <el-table-column prop="name" label="学生姓名" align="center"> </el-table-column>
                    <el-table-column prop="department_str" label="所在院系（专业）" align="center"> </el-table-column>
                    <el-table-column prop="account" label="所在班级" align="center"> </el-table-column>
                    <el-table-column prop="password" label="账号" align="center"> </el-table-column>
                    <el-table-column prop="password" label="密码" align="center"> </el-table-column>
                    <el-table-column prop="createtime" label="创建时间" align="center"> </el-table-column>
                    <el-table-column prop="" label="操作" align="center" width="200">
                        <template #default="scope">
                            <div class="mojuCaozuo" flex="cross:center main:justify">
                                <div @click="detailClick(scope.row)" class="caozuoStyle">详情</div>
                                <div @click="editClick(scope.row)" class="caozuoStyle">编辑</div>
                                <div @click="delClick(scope.row)" class="caozuoStyle delbtn">删除</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagin">
                    <el-pagination v-model:current-page="compPama.page" v-model:page-size="compPama.limit"
                        :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
        <studentDio ref="studentCom" :title="title"></studentDio>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import userMainStore from "../../store/modules/app";
const mainStore = userMainStore();
import { departmentDepartmentList, departmentClassesList, studentList } from '../../request/api' //不用加.ts
import studentDio from './compontent/studentDio.vue';
import { DepartmentListtype, studentListtype } from '~/type/login';
import ExportTable from './compontent/ExportTable.vue';
import plLiangDaoRu from './compontent/plLiangDaoRu.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const form = reactive({
    code: '',
    name: '',
    department: '',

})
const classes1 = ref('')
let departmentList = ref([] as any[]) //as any[] 这样不报红
let classesList = ref([] as any[])
let tableData = ref([])
let total = ref(0)
// interface compPamaType {
//     token: string,
//     page: number,
//     limit: number,
//     code?: string,
//     name?: string,
//     department?: number,
// }
let compPama = reactive<studentListtype>({
    token: mainStore.Authorization,
    page: 1,
    limit: 20
})
let title = ref('')
// const currentPage = ref(0)
// const pageSize = ref(20)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
interface User {
    code: string,
    name: string,
    department_str: string,
    account: string,
    password: string,
    createtime: string,
}
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    compPama.limit = val
    getteacherList()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    compPama.page = val
    getteacherList()

}
const onSubmit = () => {
    console.log('submit!')
}
const department = () => {
    let params: DepartmentListtype = {
        token: mainStore.Authorization,
        limit: 1000,
        page: 1

    };
    departmentDepartmentList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            departmentList.value = data.list


        }
    });
}
const chooseClass = () => {

    classesList.value = []
    classes1.value = ''

    classes()

}
const classes = () => {
    let params = {
        token: mainStore.Authorization,
        limit: 1000,
        department: form.department

    };
    departmentClassesList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            classesList.value = data.list
        }
    });
}
const inquire = () => {

}
const resetForm = () => {

}
const getteacherList = () => {


    compPama.code = form.code
    compPama.name = form.name
    compPama.department = form.department
    compPama.classes = classes1.value
    studentList(compPama).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            tableData.value = data.list;
            total.value = data.pageCount;
        }
    })
}
// 更改表格头部样式
const tableHeaderColor = () => {
    return { background: '#FAFAFA', color: '#222222' }
}
// 更改表体，隔行变色
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: User
    rowIndex: number
}) => {
    if (rowIndex % 2 === 1) {
        return 'warning-row'
    } else {
        return 'success-row';
    }
    return '';
}
const studentCom = ref<any>()
const newClick = () => {
    console.log('点击新增')
    studentCom.value.showDio1()
    title.value = '新增学生'
}
const detailClick: any = () => {

}
const editClick: any = () => {
    studentCom.value.showDio1()
    title.value = '编辑学生'
}
const delClick: any = () => {
    ElMessageBox.confirm(
        '确定要删除该文件吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const downLoadMuBan = () => {
    let a = document.createElement('a')
    a.href = './static/studentInport.xlsx'
    a.download = '学生导入模版.xlsx'
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    a.remove()
}
onMounted(() => {
    department()
    getteacherList()
})

</script>

<style scoped lang="scss">
.teacher_style {
    .t_top {
        width: 100%;
        height: 128px;
        background: #FFFFFF;
        border-radius: 4px;


        .t_top_title {
            width: 100%;
            height: 54px;
            line-height: 54px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;

            margin-left: 20px;
            border-bottom: 1px solid #F7F7F7;
        }
    }

    .t_top_body {
        display: flex;
        align-items: center;
        height: 72px;
        line-height: 72px;
    }

    .t_body {
        background: #fff;
        margin-top: 20px;

        .t_body_title {
            padding: 0 30px;
            display: flex;
            justify-content: space-between;

            height: 54px;
            line-height: 54px;

            span {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
            }

            .anniuList {

                .anniu {
                    width: 90px;
                    height: 34px;
                    background: #F8F8F8;
                    border: 1px solid #3244DE;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #3244DE;
                    cursor: pointer;
                    margin-left: 20px;
                }

                .anniu2 {
                    border: 1px solid #264E71;
                    color: #264E71;
                }
            }
        }
    }

    .t_body_table {
        padding: 0 20px 10px;
    }

    .pagin {
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-flow: row-reverse;


    }
}
</style>
<style>
.el-table .warning-row {
    --el-table-tr-bg-color: #FAFAFA;

}

.el-table .success-row {
    --el-table-tr-bg-color: #fff;
}
</style>